<template>
  <div class="home">
    <img alt="Vue logo" class="mainlogo" src="../assets/logo.png" />
    Home Page : This is a type of Home Page. Please don't aim at the icon.
  </div>
  <div>
    <div v-if="user !== undefined">loggedIN: {{ user }}</div>
    <Button @click="loginIds()" v-if="user === undefined">Login Ids </Button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import oidcAuth from "@/auth";
import { OidcAuth } from "@/auth";

//import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "Home",
  setup() {
    const loggedIn = ref(false);
    const user = reactive(OidcAuth.user as any);
    loggedIn.value = user !== undefined;
    return { user };
  },
  methods: {
    loginIds() {
      oidcAuth.signInRedirect(null);
    }
  }
});
</script>

<style scoped>
.mainlogo {
  width: 50px;
  height: 50px;
}
</style>
